import {Components} from "formiojs";
import $, {data} from "jquery";
import "bootstrap";
import 'jstree';
import 'jstree/dist/themes/default/style.min.css'
import demo from  '../fixtures/demo.json'

const SelectComponent = (Components as any).components.field;

class SelectTreeComponent extends SelectComponent {

    constructor(component: any, options: any, data: any) {
        super(component, options, data);
    }

    static schema(...extend: any[]) {
        return SelectComponent.schema({
            type: "SelectTree",
            label: "树形选择框",
            key: "selectTree"
        }, ...extend);
    }

    public static editForm = (...args: any) => {
        return SelectComponent.editForm([
            {
                key: "data",
                components: [
                    {
                        key: "defaultValue",
                        ignore: true
                    }, {
                        key: "multiple",
                        ignore: true
                    }, {
                        key: "persistent",
                        ignore: true
                    }, {
                        key: "protected",
                        ignore: true
                    }, {
                        key: "dbIndex",
                        ignore: true
                    }, {
                        key: "encrypted",
                        ignore: true
                    }
                ]
            }
        ], ...args);
    };

    static get builderInfo() {
        return {
            title: "树形选择框",
            group: "advanced",
            icon: "phone-square",
            weight: 30,
            documentation: "/userguide/form-building/advanced-components#selectTree",
            schema: SelectTreeComponent.schema()
        };
    }

    public render(children: any) {
        return super.render(this.renderTemplate("selectTree"));
    }

    /**
     * After the html string has been mounted into the dom, the dom element is returned here. Use refs to find specific
     * elements to attach functionality to.
     *
     * @param element
     * @returns {Promise}
     */
    attach(element: any) {
        // Allow basic component functionality to attach like field logic and tooltips.
        this.loadRefs(element, {
            selectTree: "single",
            modal: "single"
        });

        let modalContainer = this.refs["selectTree"];
        let modal = this.refs["modal"];
        let button = $(modalContainer).find("button.select-button");
        let inputName = $(modalContainer).find("input[name=selectDataName]")
        let inputVal = $(modalContainer).find("input[name=selectDataVal]")

        $(button).on("click", () => {
            $(modal).modal("show");
            $('#jstree').jstree({
                'core': {
                    'data': demo
                },
                'conditionalselect': function (node: any, event: any) {
                    let leaf = !node.children || node.children.length === 0;
                    if (leaf) {
                        $(inputName).val(node.text);
                        $(inputVal).val(node.id);
                        $(modal).modal('hide')
                    }
                    return leaf
                },
                "plugins": ["conditionalselect","search"]
            });
        });
        return super.attach(element);
    }

    /**
     * Get the value of the component from the dom elements.
     *
     * @returns {Array}
     */
    getValue() {
        return '';
    }

    /**
     * Set the value of the component into the dom elements.
     *
     * @param value
     * @returns {boolean}
     */
    setValue(value: any, flags = {}) {
        if (value) {
            console.log(value, flags);
        }
    }
}

export default {
    SelectTree: SelectTreeComponent
};
